<template>
  <div class="news-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon><Search /></el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button>
          <el-button type="primary" @click="getLists" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="searchRef" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="标题:" prop="name">
          <el-input v-model="search.keywords" size="large" placeholder="请输入内容" @change="getLists" clearable></el-input>
        </el-form-item>
        <el-form-item label="文章状态:" prop="status">
          <el-select v-model="search.status" class="m-2" @change="getLists" placeholder="Select" size="large">
            <el-option v-for="item in statusLists" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="left-right-box">
      <div class="left-box">
        <div class="title">
          <span>文章类型</span>
          <!-- <span class="icon" @click="addLeftLists">+</span> -->
        </div>
        <div v-for="(item, i) in leftLists" :key="i" :class="{ 'left-lists': true, active: item.id == leftActId }" @click="leftItemCli(item.id)">
          <!-- @mouseenter="leftItemOver(item.id)"
          @mouseleave="leftItemOut(item.id)" -->
          <div class="name" v-if="leftEditActId != item.id">{{ item.name }}</div>
          <div @click.stop="editInput">
            <el-input v-model="item.name" v-if="leftEditActId == item.id" class="input-name" placeholder="请输入内容"></el-input>
          </div>
          <!-- 鼠标放上去 -->
          <div class="option" v-if="leftOverActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="leftEditCli(item)"><component :is="'Edit'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="DelLeftCli(item.id, i)"><component :is="'Delete'" /></el-icon>
          </div>
          <!-- 点击编辑图标进入编辑状态 -->
          <div class="option" v-if="leftEditActId == item.id">
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="cancelLeftEdit(item)"><component :is="'Close'" /></el-icon>
            <el-icon style="padding: 6px; cursor: pointer; font-size: 16px" @click.stop="confirmLeftEdit(item)"><component :is="'Check'" /></el-icon>
          </div>
        </div>
      </div>
      <div class="right-box">
        <el-card class="table-card">
          <template #header>
            <el-button @click="addLists()" size="large" icon="Plus">添加文章</el-button>
          </template>
        </el-card>
        <el-table :data="comLists" border style="width: 100%" @row-click="rowCli">
          <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column prop="img" label="图片" align="center" header-align="center">
            <template #default="scope">
              <img :src="scope.row.newsCover" style="width: 100px; height: 100px; cursor: pointer" alt="" @click.stop="imgPreview(scope.row.newsCover)"
            /></template>
          </el-table-column>

          <el-table-column prop="title" label="标题" align="center" header-align="center"> </el-table-column>

          <el-table-column prop="abstracts" label="内容摘要" align="center" header-align="center"> </el-table-column>

          <el-table-column prop="viewCount" label="浏览次数" align="center" header-align="center"> </el-table-column>

          <el-table-column prop="statusText" label="状态" align="center" header-align="center">
            <template #default="scope">
              <span :style="scope.row.statusTextStyle">{{ scope.row.statusText }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="时间" align="center" header-align="center"> </el-table-column>

          <el-table-column label="操作" align="center" header-align="center" width="160px">
            <template #default="scope">
              <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon"><Edit /></el-icon>

              <el-icon @click.stop="deleteFun(scope.row.id, scope.$index)" class="lists-delete-icon" v-if="scope.row.status != '0'"><Delete /></el-icon>
              <el-icon title="恢复文章" @click.stop="fabuFun(scope.row.id, scope.$index)" class="lists-delete-icon" v-if="scope.row.status == '0'"
                ><RefreshRight
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px; overflow: hidden">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="handlePrev"
            @next-click="handleNext"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="pagination"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加编辑文章类型 -->
    <addEditType :show="showAddEditType" :addEditData="addEditDataType" :status="addEditStatusType" @change-addEdit-type="changeAddEditType" />

    <!-- 添加编辑文章 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" :typeId="leftActId" @change-addEdit="changeAddEdit" />

    <!-- 图片预览 -->
    <el-dialog :append-to-body="true" width="50%" v-model="showImages">
      <img style="width: 100%" :src="imageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import News from '@api/news/index'
import addEdit from './components/addEdit.vue'
import addEditType from './components/addEditType.vue'
import { ElMessageBox } from 'element-plus'

const router = useRouter()

// *********************************************类型列表
const leftLists = ref([]) //左边列表
const leftActId = ref('') //选中id
const leftEditActId = ref('') //编辑id
const leftOverActId = ref('') //放上去id

const showAddEditType = ref(false) //显示隐藏弹框
const addEditStatusType = ref('add') //添加编辑状态
const addEditDataType = reactive({
  id: '',
  name: ''
})

//获取大类列表
async function getLeftLists() {
  // await new News().getMany()
  leftLists.value = [
    {
      id: '1',
      name: '企业要闻'
    },
    {
      id: '2',
      name: '最新动态'
    },
    {
      id: '3',
      name: '合作资讯'
    },
    {
      id: '4',
      name: '大咖互动'
    }
  ]

  leftActId.value = '1'

  getLists()
}

//取消编辑
function cancelLeftEdit() {
  leftEditActId.value = ''
}

//确认编辑
function confirmLeftEdit() {
  leftEditActId.value = ''
}

//编辑左边数据按钮
function leftEditCli(item) {
  leftEditActId.value = item.id
  leftOverActId.value = ''
  leftStatus.value = 'edit'
}

//删除左边数据
function DelLeftCli(id, index) {
  let data = leftLists.value
  data.splice(index, 1)
  leftActId.value = data.length ? data[0].id : ''
  getLists()
}

//鼠标over事件
function leftItemOver(id) {
  if (leftEditActId.value != id) {
    leftOverActId.value = id
  }
}

//鼠标out事件
function leftItemOut() {
  leftOverActId.value = ''
  // this.leftEditActId = "";
}

//点击左边列表
function leftItemCli(id) {
  leftActId.value = id
  leftEditActId.value = ''
  pageNum.value = 1
  getLists()
}

//添加左边类目
function addLeftLists() {
  showAddEditType.value = true
  addEditDataType.id = ''
  addEditDataType.name = ''
  addEditStatusType.value = 'add'
}

//添加编辑文章回调
function changeAddEditType(data, type, status) {
  showAddEditType.value = false

  if (status == 'add') {
    getLists()
  } else if (status == 'edit') {
    getLists()
  }
}

// *********************************************列表
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(10)
const lists = ref([])
const search = reactive({
  keywords: '',
  status: '2'
})
const searchRef = ref()

const statusLists = [
  {
    label: '所有',
    value: 'all'
  },
  {
    label: '已删除',
    value: '0'
  },
  // {
  //   label: '暂存',
  //   value: '1'
  // },
  {
    label: '已发布',
    value: '2'
  }
]

//重置
function resetFun() {
  search.keywords = ''
  search.status = '2'
  getLists()
}

//获取列表
async function getLists() {
  let data = { pageNum: pageNum.value, pageSize: pageSize.value, keywords: search.keywords, typeCode: leftActId.value }

  if (search.status != 'all') {
    data.status = search.status
  }

  let res = await new News().getLists(data)

  if (res.code == 200) {
    lists.value = res.data.list
  }

  total.value = res.data.total
}

//过滤列表
let statusTextArr = ['已删除', '暂存', '已发布']
let statusTextStatusArr = ['color:#ff8880', '', 'color:#67c23a']
let comLists = computed(() => {
  return lists.value.map((v) => {
    return {
      ...v,
      statusText: statusTextArr[parseInt(v.status)],
      statusTextStyle: statusTextStatusArr[parseInt(v.status)]
    }
  })
})

//pageSize改变
function handleSizeChange(val) {
  pageSize.value = val
  getLists()
}

//pageNum改变
function handleCurrentChange(val) {
  pageNum.value = val
  getLists()
  // this.$store.dispatch('setPageNum', val);
}

//上一页
function handlePrev(val) {
  pageNum.value = val
  getLists()
}

//下一页
function handleNext(val) {
  pageNum.value = val
  getLists()
}

// *********************************************添加编辑
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //添加编辑状态
const addEditData = reactive({
  //
  id: '',
  title: '',
  img: [],
  content: '[]',
  html: ''
})

//添加文章
function addLists() {
  addEditData.id = ''
  addEditData.title = ''
  addEditData.img = []
  addEditData.content = '[]'
  addEditData.html = ''
  addEditData.abstracts = ''
  addEditStatus.value = 'add'
  showAddEdit.value = true
}

//添加编辑文章回调
function changeAddEdit(data, status) {
  showAddEdit.value = false
  if (status == 'add') {
    getLists()
  } else if (status == 'edit') {
    getLists()
  }
}

//编辑文章
function editFun(item) {
  addEditData.id = item.id
  addEditData.title = item.title
  addEditData.img = item.newsCover
    ? item.newsCover.split(',').map((v) => {
        return {
          url: v,
          name: v
        }
      })
    : []
  addEditData.content = item.content
  addEditData.html = item.news
  addEditData.abstracts = item.abstracts
  addEditStatus.value = 'edit'
  showAddEdit.value = true
}

//删除文章
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除文章?')
    .then(async () => {
      let res = await new News().changeStatus({ id, status: 0 })
      if (res.code == 200) {
        getLists()
      }
    })
    .catch(() => {})
}

//发布文章
function fabuFun(id, index) {
  ElMessageBox.confirm('确定发布文章?')
    .then(async () => {
      let res = await new News().changeStatus({ id, status: 2 })
      if (res.code == 200) {
        getLists()
      }
    })
    .catch(() => {})
}

//查看详情
function rowCli(item, column) {
  // router.push({ path: '/home/news/detail', query: { id: row.id } })
  addEditData.id = item.id
  addEditData.title = item.title
  addEditData.img = item.newsCover
    ? item.newsCover.split(',').map((v) => {
        return {
          url: v,
          name: v
        }
      })
    : []
  addEditData.content = item.content
  addEditData.html = item.news
  addEditData.abstracts = item.abstracts
  addEditStatus.value = 'read'
  showAddEdit.value = true
}

// *********************************************预览图片
//图片预览
const showImages = ref(false)
const imageUrl = ref('')

//图片预览
function imgPreview(file) {
  imageUrl.value = file
  showImages.value = true
}

onMounted(() => {
  getLeftLists()
})
</script>
<style lang="scss">
.news-box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;
        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
